//index.js
//获取应用实例
const App = getApp();

Page({
  data: {
    userInfo: null,
    Avatar_tempFilePaths:null,
    avatar_border_1:null,
    avatar_border_2: null,
    avatar_border_3: null,
    Isupload:false,
    QR_tempFilePaths:null,
    Bgm_tempFilePaths:null,
    tempFilePaths:null,
    Demo:null,
    Save_tempFilePaths: "1",
    id:null,
    windowWidth: App.globalData.systemInfo.windowWidth,
    windowHeight: App.globalData.systemInfo.windowHeight
    
  },
  //事件处理函数
 
  

  onLoad: function () {
    var that = this
    
    that.setData({
      userInfo: App.globalData.userInfo.avatarUrl
    })
    
    

    wx.downloadFile({
      url: 'https://myzhbit.cn/microHelper/web/images/avatar/QR.jpg',
      success: function (res) {
        that.setData({
          QR_tempFilePaths: res.tempFilePath
        })
      }
    });

    wx.downloadFile({
      url: 'https://myzhbit.cn/microHelper/web/images/image/bgm_2.jpg', 
      success: function (res) {
        that.setData({
          Bgm_tempFilePaths: res.tempFilePath
        })
      }
    });
    wx.downloadFile({
      url: 'https://myzhbit.cn/microHelper/web/images/avatar/avatar_dec_1.png', 
      success: function (res) {
        that.setData({
          avatar_border_1: res.tempFilePath
        })
      }
    });
    wx.downloadFile({
      url: 'https://myzhbit.cn/microHelper/web/images/avatar/avatar_dec_2.png', 
      success: function (res) {
        that.setData({
          avatar_border_2: res.tempFilePath
        })
      }
    });
    wx.downloadFile({
      url: 'https://myzhbit.cn/microHelper/web/images/avatar/avatar_dec_3.png', 
      success: function (res) {
        that.setData({
          avatar_border_3: res.tempFilePath
        })
        
      }
    });
    wx.downloadFile({
      url: that.data.userInfo,
      success: function (res) {
        that.setData({
          Avatar_tempFilePaths: res.tempFilePath
        })
      }
    });
    
  },
  onReady: function (e) {
    var context = wx.createCanvasContext('firstCanvas')
    var that = this
    context.setFillStyle('white')
    context.fillRect(0, 0, 166, 166)
    context.drawImage("../../images/demo.png", 5, 5, 156, 156)
    context.draw()
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'firstCanvas',
        success: function (res) {
          that.setData({
            Save_tempFilePaths: res.tempFilePath
          })
          console.log(that.data.Save_tempFilePaths)
        }
      })
    }, 200)
  },
//更换头像
BindChange:function(){
  var context = wx.createCanvasContext('firstCanvas')
  var that = this
  var id = that.data.id
  if(id == 0){
     id++;
     that.setData({
       id: id,
     })
     context.setFillStyle('white')
     context.fillRect(0, 0, 300, 500)
     context.drawImage(that.data.tempFilePaths, 7, 7, 152, 152)
     context.drawImage(that.data.avatar_border_2, 7, 35, 120, 120)
     context.draw();
  } else if (id == 1){
    id++;
    that.setData({
      id: id,
    })
    context.arc(82, 82, 82, 0, 2 * Math.PI)
    context.setFillStyle('white')
    context.fill()
    context.drawImage(that.data.tempFilePaths, 27, 26, 110, 110)
    context.drawImage(that.data.avatar_border_3, 4, 4, 156, 156)
    context.draw();
  } else if (id == 2){
    id = 0;
    that.setData({
      id: id,
    })
    context.setFillStyle('white')
    context.fillRect(0, 0, 300, 500)
    context.drawImage(that.data.tempFilePaths, 7, 7, 152, 152)
    context.drawImage(that.data.avatar_border_1, 40, 7, 120, 120)
    context.draw();
  }
  setTimeout(function () {
    wx.canvasToTempFilePath({

      canvasId: 'firstCanvas',
      success: function (res) {
        //console.log(res.tempFilePath)

        that.setData({
          Save_tempFilePaths: res.tempFilePath
        })
        console.log(that.data.Save_tempFilePaths)
      }
    })
  }, 200)
},
 

//分享图片

BindShare1:function(){
  var context = wx.createCanvasContext('secondCanvas')
  var that = this;
  context.drawImage(that.data.Bgm_tempFilePaths, 0, 0, 300, 475)
  context.drawImage(that.data.Save_tempFilePaths, 60, 130, 180, 180)
  context.drawImage(that.data.QR_tempFilePaths, 105, 350, 85, 85)
  context.drawImage(that.data.Avatar_tempFilePaths, 137, 382, 22, 22)
  context.arc(148, 393, 15, 0, 2 * Math.PI);
  context.arc(148, 393, 14, 0, 2 * Math.PI);
  context.arc(148, 393, 13, 0, 2 * Math.PI);
  context.arc(148, 393, 12, 0, 2 * Math.PI);
  
  context.stroke()
  context.draw()
  wx.showToast({
    title: '正在生成',
    icon: 'success',
    duration: 2000
  })
  setTimeout(function () {
    
    wx.canvasToTempFilePath({

      canvasId: 'secondCanvas',
      success: function (res) {
        //console.log(res.tempFilePath)
        wx.previewImage({
          urls: [res.tempFilePath]
           // 需要预览的图片http链接列表
        })
        wx.showToast({
          title: '长按即可保存',
          icon: 'success',
          duration: 3000
        })
      }
    })
  }, 2000) //延迟时间 这里是1秒 
  
},
 //展示图片
  click_avatar:function(){
    var that = this
    wx.previewImage({
      urls: [that.data.Save_tempFilePaths] // 需要预览的图片http链接列表
    })
  },
  
  //上传图片
  BindUploadpic: function(){
    var context = wx.createCanvasContext('firstCanvas')
    var that = this
     wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            
            that.setData({
              tempFilePaths: res.tempFilePaths[0],
              id:0,
              Isupload: true
            })
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
            //console.log(that.data.tempFilePaths)
            context.setFillStyle('white')
            context.fillRect(0, 0, 166, 166)
            //需要更改规范
            context.drawImage(res.tempFilePaths[0], 7, 7, 152, 152) 
            context.drawImage(that.data.avatar_border_1, 40, 7, 120, 120)
            
            context.draw();
            setTimeout(function () {
              wx.canvasToTempFilePath({

                canvasId: 'firstCanvas',
                success: function (res) {
                  that.setData({
                    Save_tempFilePaths: res.tempFilePath
                  })
                  console.log(that.data.Save_tempFilePaths)
                }
              })
            }, 200)
          
          }
          
     })
  }

})
